import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import ServiceOverview from './ServiceOverview';
import RiskAsset from './RiskAsset';
import Security from './Security';
import Aviliable from './Aviliable';
import ContentMonitor from './ContentMonitor';
import MapInfo from './MapInfo';
import s from './Home.module.css';
import Breadcrumb, { Item } from '../../components/Breadcrumb';
import fetch from 'API/fetch';
export default function Home({ className }) {
	const [taskInfo, setTaskInfo] = React.useState({});
	const [jobInfo, setJobInfo] = React.useState({});
	const [pendingTask, setPendingTask] = React.useState({});
	const [lastUpdateTime, setLastUpdateTime] = React.useState('- -');
	const [loading, setLoading] = React.useState(true);
	const [planData, setPlanData] = React.useState({});
	async function getData() {
		const res = await fetch('/api/v2/index/overview', {
			method: 'GET',
		}).catch(e => {
			return {};
		});
		if (res.code === 200) {
			const taskInfo_ = res.results.task_info;
			taskInfo_.availability = taskInfo_.ping + taskInfo_.http;
			// taskInfo_.vul = taskInfo_.vul + taskInfo_.ssl || 0;
			taskInfo_.vul = taskInfo_.vul || 0;
			setTaskInfo(taskInfo_);
			setJobInfo(res.results.job_info);
			setPendingTask(res.results.pending_task);
			setLoading(false);
		}
	}
	const getPlanData = async () => {
		const res = await fetch(`/api/v2/index/get_plan`, {
			method: 'GET',
		}).catch(e => {
			return {};
		});
		if (res.msg === 'ok') {
			setPlanData(res.results);
		}
	};
	React.useMemo(() => {
		getData();
		getPlanData();
	}, []);
	return (
		<div className={cn(className, s.home)}>
			<div className={s.head}>
				<Breadcrumb className={s.breadCrumb}>
					<Item key="job" active>
						安全概览
					</Item>
				</Breadcrumb>
				<div>更新时间：{lastUpdateTime}</div>
			</div>
			<div className={s.homeContent}>
				<ServiceOverview
					taskInfo={taskInfo}
					jobInfo={jobInfo}
					loading={loading}
					planData={planData}
				/>
				<div className={s.df_aifs_jcsb}>
					<Security planData={planData} />
					<ContentMonitor />
				</div>
				<Aviliable />
				<MapInfo getTime={setLastUpdateTime}></MapInfo>
			</div>
		</div>
	);
}

Home.propTypes = {
	className: PropTypes.string,
};

Home.defaultProps = {
	className: s.home,
};
